"use client";

import { useState } from "react";
import Link from "next/link";
import { Image } from "@heroui/image";
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false);

  const [username, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [captcha, setCaptcha] = useState("");

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#e0f7fa] via-[#f1f8e9] to-[#ffe0b2]">
      <div className="w-full max-w-5xl flex bg-white bg-opacity-80 rounded-xl shadow-xl overflow-hidden">
        {/* 左图 */}
        <div className="w-1/2 p-8 hidden md:flex items-center justify-center">
          <Image alt="logo" src="/loginIllustration.png" />
        </div>

        {/* 右表单 */}
        <div className="w-full md:w-1/2 p-10 flex flex-col justify-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-6">
            欢迎使用渡一文档系统
          </h2>

          <form className="space-y-5">
            {/* 用户名 */}
            <div>
              <label
                className="block text-sm font-medium text-gray-600 mb-1"
                htmlFor="username"
              >
                用户名
              </label>
              <input
                className="w-full px-4 py-2 border rounded focus:outline-none focus:ring focus:border-blue-400"
                id="username"
                placeholder="admin"
                type="text"
                value={username}
                onChange={(e) => setUserName(e.target.value)}
              />
            </div>

            {/* 密码 */}
            <div>
              <label
                className="block text-sm font-medium text-gray-600 mb-1"
                htmlFor="password"
              >
                密码
              </label>
              <div className="relative">
                <input
                  className="w-full px-4 py-2 border rounded focus:outline-none focus:ring focus:border-blue-400"
                  id="password"
                  placeholder="******"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
                <button
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
                  type="button"
                  onClick={() => setShowPassword((prev) => !prev)}
                >
                  {showPassword ? (
                    <EyeSlashIcon className="h-5 w-5" />
                  ) : (
                    <EyeIcon className="h-5 w-5" />
                  )}
                </button>
              </div>
            </div>

            {/* 验证码 */}
            <div className="flex gap-3 items-end">
              <div className="flex-1">
                <label
                  className="block text-sm font-medium text-gray-600 mb-1"
                  htmlFor="captcha"
                >
                  验证码
                </label>
                <input
                  className="w-full px-4 py-2 border rounded focus:outline-none focus:ring focus:border-blue-400"
                  id="captcha"
                  placeholder="请输入验证码"
                  type="text"
                  value={captcha}
                  onChange={(e) => setCaptcha(e.target.value)}
                />
              </div>
              <Image
                alt="captcha"
                className="h-[42px] w-[100px] cursor-pointer rounded border hover:opacity-80"
              />
            </div>

            {/* 登录按钮 */}
            <button
              className="w-full bg-blue-500 text-white py-2 rounded font-semibold hover:bg-blue-600 transition"
              type="submit"
            >
              登录
            </button>
          </form>

          {/* 切换注册 */}
          <div className="mt-6 text-sm text-center text-gray-600">
            还没账号？
            <Link
              className="text-blue-500 hover:underline ml-1"
              href="/register"
            >
              点我注册
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
